<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/pages/admin/include/taglib.jsp"%>
<html>
<head>
<title>欢迎光临</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="" />
    <meta name="author" content="" />



    <link rel="stylesheet" href="${ctxCss}/frontface/bootstrap.min.css" />
    <link rel="stylesheet" href="${ctxCss}/frontface/style.css" />
    <link rel="stylesheet" href="${ctxCss}/frontface/header.css" />
    <link rel="stylesheet" href="${ctxCss}/frontface/bootstrap-responsive.min.css" />
    <link rel="stylesheet" href="${ctxCss}/frontface/style_responsive.css" />
    <link rel="shortcut icon" href="favicon.ico" />        
    <!-- CSS Implementing Plugins -->    
    <link rel="stylesheet" href="${ctxCss}/frontface/font-awesome.css" />
    <link rel="stylesheet" href="${ctxCss}/frontface/flexslider.css" type="text/css" media="screen" />    	
    <link rel="stylesheet" href="${ctxCss}/frontface/parallax-slider.css" type="text/css" />
    <!-- CSS Theme -->    
    <link rel="stylesheet" href="${ctxCss}/frontface/default.css" id="style_color" />
   <link rel="stylesheet" href="${ctxditor}/sample.css"  type="text/css" />
   	<style>

		.cke_focused,
		.cke_editable.cke_focused
		{
			outline: 3px dotted blue !important;
			*border: 3px dotted blue !important;	/* For IE7 */
		}

	</style>
</head>
<body>

<!--=== Top ===-->    
<div class="top">
    <div class="container">         
    </div>      
</div><!--/top-->
<!--=== End Top ===-->    

<!--=== Header ===-->
<div class="header">               
    <div class="container"> 
        <!-- Logo -->       
        <div class="logo">                                             
            <a href="index.html"><img id="logo-header" src="${ctxCss}/frontface/images/logo1-default.png" alt="Logo" /></a>
        </div><!-- /logo -->        
                                    
        <!-- Menu -->       
        <div class="navbar">                                
            <div class="navbar-inner">                                  
                <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </a><!-- /nav-collapse -->                                  
                <div class="nav-collapse collapse">                                     
                    <ul class="nav top-2">
                        <li class="active">
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Home                       
                            </a>                    
                        </li>
                        <li>
                            <a href="" class="dropdown-toggle" data-toggle="dropdown">Pages
                                <!-- <b class="caret"></b>      -->                       
                            </a>
                        </li>
                        <li>
                            <a href="" class="dropdown-toggle" data-toggle="dropdown">Features
                                <b class="caret"></b>                            
                            </a>                    
                        </li>
                        <li>
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Portfolio                                
                            </a> 
                        </li>
                        <li>
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Blog    
                            </a> 
                        </li>
                        <li>
                            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Contact                   
                            </a>           
                        </li>
                    </ul>

                </div><!-- /nav-collapse -->                                
            </div><!-- /navbar-inner -->
        </div><!-- /navbar -->                          
    </div><!-- /container -->               
</div><!--/header -->      
<!--=== End Header ===-->

<!--=== Slider ===-->
<div class="slider-inner">
    <div id="da-slider" class="da-slider">
        <div class="da-slide">
            <h2><i>CLEAN &amp; FRESH</i> <br /> <i>FULLY RESPONSIVE</i> <br /> <i>DESIGN</i></h2>
            <p><i>Lorem ipsum dolor amet</i> <br /> <i>tempor incididunt ut</i> <br /> <i>veniam omnis </i></p>
            <div class="da-img">图片1<img src="${ctxCss}/frontface/images/1.png" alt="" /></div>
        </div>
        <div class="da-slide">
            <h2><i>RESPONSIVE VIDEO</i> <br /> <i>SUPPORT AND</i> <br /> <i>MANY MORE</i></h2>
            <p><i>Lorem ipsum dolor amet</i> <br /> <i>tempor incididunt ut</i></p>
            <div class="da-img span6">
            	<div class="span6">		
 				</div>
            </div>
        </div>
        <div class="da-slide">
            <h2><i>USING BEST WEB</i> <br /> <i>SOLUTIONS WITH</i> <br /> <i>HTML5/CSS3</i></h2>
            <p><i>Lorem ipsum dolor amet</i> <br /> <i>tempor incididunt ut</i> <br /> <i>veniam omnis </i></p>
            <div class="da-img">图片3<img src="assets/plugins/parallax-slider/img/html5andcss3.png" alt="image01" /></div>
        </div>
        <nav class="da-arrows">
            <span class="da-arrows-prev"></span>
            <span class="da-arrows-next"></span>		
        </nav>
    </div><!--/da-slider-->
</div><!--/slider-->
<!--=== End Slider ===-->



<!--=== Content Part ===-->
<hr/>
<div class="container">	
	<!-- Service Blocks -->
	<div class="row-fluid">
    	<div class="span4">
    		<div class="service clearfix">
                <i class="icon-resize-small"></i>
    			<div class="desc">
    				<h4>demo1</h4>
                    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus etiam sem...</p>
    			</div>
    		</div>	
    	</div>
    	<div class="span4">
    		<div class="service clearfix">
                <i class="icon-cogs"></i>
    			<div class="desc">
    				<h4>demo2</h4>
                    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus etiam sem...</p>
    			</div>
    		</div>	
    	</div>
    	<div class="span4">
    		<div class="service clearfix">
                <i class="icon-plane"></i>
    			<div class="desc">
    				<h4>demo3</h4>
                    <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus etiam sem...</p>
    			</div>
    		</div>	
    	</div>			    
	</div><!--/row-fluid-->
	<!-- //End Service Blokcs -->

	<!-- Recent Works -->
	<div class="headline"><h3>内容模块1</h3></div>
    <ul class="thumbnails">
        <li class="span3">
            <div class="thumbnail-style thumbnail-kenburn">
            	<div class="thumbnail-img">
                    <div class="overflow-hidden"><img src="assets/img/carousel/2.jpg" alt="" /></div>
                    <a class="btn-more hover-effect" href="#">read more +</a>					
                </div>
                <h3><a class="hover-effect" href="#">demo4</a></h3>
                <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, justo sit amet risus etiam porta sem.</p>
            </div>
        </li>
        <li class="span3">
            <div class="thumbnail-style thumbnail-kenburn">
            	<div class="thumbnail-img">
                    <div class="overflow-hidden"><img src="assets/img/carousel/3.jpg" alt="" /></div>
                    <a class="btn-more hover-effect" href="#">read more +</a>					
                </div>
                <h3><a class="hover-effect" href="#">demo5</a></h3>
                <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, justo sit amet risus etiam porta sem.</p>
            </div>
        </li>
        <li class="span3">
            <div class="thumbnail-style thumbnail-kenburn">
            	<div class="thumbnail-img">
                    <div class="overflow-hidden"><img src="assets/img/carousel/9.jpg" alt="" /></div>
                    <a class="btn-more hover-effect" href="#">read more +</a>					
                </div>
                <h3><a class="hover-effect" href="#">demo6</a></h3>
                <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, justo sit amet risus etiam porta sem.</p>
            </div>
        </li>
        <li class="span3">
            <div class="thumbnail-style thumbnail-kenburn">
            	<div class="thumbnail-img">
                    <div class="overflow-hidden"><img src="assets/img/carousel/10.jpg" alt="" /></div>
                    <a class="btn-more hover-effect" href="#">read more +</a>					
                </div>
                <h3><a class="hover-effect" href="#">demo7</a></h3>
                <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, justo sit amet risus etiam porta sem.</p>
            </div>
        </li>
    </ul><!--/thumbnails-->
	<!-- //End Recent Works -->
    
	<!-- Information Blokcs -->
	<div class="row-fluid margin-bottom-20">
    	<!-- Who We Are -->
		<div class="span8">
			<div class="headline"><h3>内容模块2</h3></div>
			<p><img class="pull-left lft-img-margin img-width-200" src="assets/img/carousel/6.jpg" alt="" />Unify is an incredibly beautiful responsive Bootstrap Template for corporate and creative professionals. It works on all major web browsers, tablets and phone.</p>	
            <ul class="unstyled">
            	<li><i class="icon-ok color-green"></i> Donec id elit non mi porta gravida</li>
            	<li><i class="icon-ok color-green"></i> Corporate and Creative</li>
            	<li><i class="icon-ok color-green"></i> Responsive Bootstrap Template</li>
            	<li><i class="icon-ok color-green"></i> Corporate and Creative</li>
            </ul><br />

            <blockquote class="hero-unify">
                <p>Award winning digital agency. We bring a personal and effective approach to every project we work on, which is why. Unify is an incredibly beautiful responsive Bootstrap Template for corporate professionals.</p>
                <small>CEO, Jack Bour</small>
                	<p>
				<textarea class="ckeditor" cols="80" id="editor4" rows="10" tabindex="1"></textarea>
				</p>
            </blockquote>
        </div><!--/span8-->        

        <!-- Latest Shots -->
        <div class="span4">
			<div class="headline"><h3>Latest Shots</h3></div>
			<div id="myCarousel" class="carousel slide">
                <div class="carousel-inner">
                  <div class="item active">
                    <img src="assets/img/carousel/5.jpg" alt="" />
                    <div class="carousel-caption">
                      <p>Cras justo odio, dapibus ac facilisis in, egestas.</p>
                    </div>
                  </div>
                  <div class="item">
                    <img src="assets/img/carousel/4.jpg" alt="" />
                    <div class="carousel-caption">
                      <p>Cras justo odio, dapibus ac facilisis in, egestas.</p>
                    </div>
                  </div>
                  <div class="item">
                    <img src="assets/img/carousel/3.jpg" alt="" />
                    <div class="carousel-caption">
                      <p>Cras justo odio, dapibus ac facilisis in, egestas.</p>
                    </div>
                  </div>
                </div>
                
                <div class="carousel-arrow">
                    <a class="left carousel-control" href="#myCarousel" data-slide="prev"><i class="icon-angle-left"></i></a>
                    <a class="right carousel-control" href="#myCarousel" data-slide="next"><i class="icon-angle-right"></i></a>
                </div>
			</div>
        </div><!--/span4-->
	</div><!--/row-fluid-->	
	<!-- //End Information Blokcs -->

	
</div><!--/container-->		
<!-- End Content Part -->



<!--=== Copyright ===-->
<div class="copyright">
	<div class="container">
		<div class="row-fluid">
			<div class="span8">						
	            <p>Copyright &copy; 2014.Company name All rights reserved.<a target="_blank" href="http://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></p>
			</div>
			<div class="span4">	
				<a href="index.html"><img id="logo-footer" src="assets/img/logo2-default.png" class="pull-right" alt="" /></a>
			</div>
		</div><!--/row-fluid-->
	</div><!--/container-->	
</div><!--/copyright-->	
<!--=== End Copyright ===-->
<script type="text/javascript">
  var ctxImg = '${ctxImg}';
</script>
<!-- JS Global Compulsory -->			
<script type="text/javascript" src="${ctxJs}/frontface/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="${ctxJs}/frontface/modernizr.custom.js"></script>		
<script type="text/javascript" src="${ctxJs}/frontface/bootstrap.min.js"></script>	
<!-- JS Implementing Plugins -->           
<script type="text/javascript" src="${ctxJs}/frontface/jquery.flexslider-min.js"></script>
<script type="text/javascript" src="${ctxJs}/frontface/modernizr.js"></script>
<script type="text/javascript" src="${ctxJs}/frontface/jquery.cslider.js"></script> 
<script type="text/javascript" src="${ctxJs}/frontface/back-to-top.js"></script>
<!-- JS Page Level -->           
<script type="text/javascript" src="${ctxJs}/frontface/app.js"></script>
<script type="text/javascript" src="${ctxJs}/frontface/index.js"></script>
<script type="text/javascript" src="${ctxditor}/ckeditor.js"></script>
<script type="text/javascript">
    jQuery(document).ready(function() {
      	App.init();
        App.initSliders();
        Index.initParallaxSlider();
    });
    

	CKEDITOR.on( 'instanceReady', function( evt ) {
		var editor = evt.editor;
		editor.setData( ' ' );

		// Apply focus class name.
		editor.on( 'focus', function() {
			editor.container.addClass( 'cke_focused' );
		});
		editor.on( 'blur', function() {
			editor.container.removeClass( 'cke_focused' );
		});

		// Put startup focus on the first editor in tab order.
		if ( editor.tabIndex == 1 )
			editor.focus();
	});

</script>
<!--[if lt IE 9]>
    <script src="assets/js/respond.js"></script>
<![endif]-->

</body>
</html>